<template>
    <div class="animation">
        <div class="num" v-if="!isStop">剩余次数 {{this.allGroupNum - num - 1}}</div>
        <div class="box"> 
            <div class="box-content">
                <div class="item"></div>
                <div class="item"> <div class="arrow right"></div> </div>
                <div class="item"></div>
                <div class="item"><div class="arrow top"></div></div>
                <div class="item "> <div class="text"> {{ 4 - (now % 4) }}<span>秒</span></div></div>
                <div class="item"><div class="arrow bottom"></div></div>
                <div class="item"></div>
                <div class="item"><div class="arrow "></div></div>
                <div class="item"></div>
            </div>
            <div class="box-text">
                <div v-for="(item , index) in groupInfo" :key="index" :class="['box-text-txt','one', (change % 4 == index) ? 'now-color' : '' ]" >{{item.msg}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        // 动画组数
        allGroupNum:{
            type: Number,
            default() {
                return 4
            }
        },
        // 每组详情
        groupInfo: {
            type: Array,
            default() {
                return [
                    { duration: 4 , msg: '吸气' },
                    { duration: 4 , msg: '屏气' },
                    { duration: 4 , msg: '呼气' },
                    { duration: 4 , msg: '屏气' }
                ]
            },
            validator(val) {
                return val.length === 4
            }
        },
        isStop: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            now: 0,
            change: 0,
            timer: '',
            num: 0
        }
    },
    mounted() {
        // 获取总时长
        if (this.isStop) return
        this.start()
    },
    watch: {
        isStop(val) {
            if (!val) {
                console.log('状态改变，开始动画4')
                this.start()
            } 
        }  
    },
    methods: {
        start() {
            const groupDuration = this.groupInfo.reduce((total, num)=> {
            if (total instanceof Object) {
                    return total.duration + num.duration
                } else if (!isNaN(total)){
                    return total + num.duration
                }
            })
            const totalDuration = groupDuration * this.allGroupNum
            console.log(totalDuration)

            this.timer = setInterval(() => {
                this.now ++
                if (this.now % 4 == 0) {
                    this.change ++
                    console.log('第：'+this.change)
                }
                if (this.now % 16 == 0) {
                    this.num++
                    console.log('组：' + this.num)
                }

                if (this.now == (totalDuration - 1)) {
                    clearInterval(this.timer)
                }          
            }, 1000)
        }
    },
    destroyed() {
        clearInterval(this.timer)
    }
}
</script>
<style scoped>
.animation{
    width: 100%;
    height: 100vh;
    background: #C9D9C5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    box-sizing: border-box;
    height: 400px;
    width: 400px;
    border: 16px solid #fff;
    border-radius: 8px;   
    position: relative;
    zoom: 0.55;
}
.box-content{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,33.33%);
    grid-template-rows: repeat(3,33.33%);
}
.item{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 箭头 默认left*/
.arrow{
    height: 8px;
    width: 80px;
    background: #fff;
    border-radius: 8px;
    position: relative;
}
.right{
    transform: rotate(180deg);
}
.top{
    transform: rotate(90deg);
}
.bottom{
    transform: rotate(270deg);
}
.text{
    text-align: center;
    font-size: 88px;
    font-weight: 500;
    color: #fff;
}
.text span{
    font-size: 30px;
}
.arrow::before{
    content: '';
    height: 36px;
    width: 8px;
    top: 4px;
    left: -1px;
    border-radius: 8px;
    position: absolute;
    background: #fff;
    transform: rotate(-45deg);
    transform-origin: 50% 0%;
}
.arrow::after{
    content: '';
    height: 36px;
    width: 8px;
    top: 4px;
    left: -1px;
    border-radius: 8px;
    position: absolute;
    background: #fff;
    transform: rotate(225deg);
    transform-origin: 50% 0%;
}

/* 文本区域 */
.box-text{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
}
.box-text-txt{
    position: absolute;
    text-align: center;
    font-size: 60px;
}
.box-text-txt:nth-child(1) {
    width: 100%;
    text-align: center;
    top: -30%;
}
.box-text-txt:nth-child(2) {
    height: 100%;
    display: flex;
    align-items: center;
    right: -45%;
    top: 0;
}
.box-text-txt:nth-child(3){
    width: 100%;
    text-align: center;
    bottom: -30%;
}
.box-text-txt:nth-child(4){
    height: 100%;
    display: flex;
    align-items: center;
    left: -45%;
    top: 0;
}
.now-color{
    color: #fff;
}
.num{
    font-size: 30px;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
}
</style>